<template>
    <view id="main">
        <!-- 顶部搜索框 -->
        <zy-topBar searchwidth="90%" scarchBottom showBack v-model="searchParam" @search="search" title="打印机"
            paddingTop="50" height="40">
            <template #right>
                <view @tap="goback" class="fs_12">确定</view>
            </template>
        </zy-topBar>
        <view class="content">
            <scroll-view scroll-y>
                <view>
                    <view v-for="(item, index) in equipmentStore.printerList" class="item card"
                        :class="{ 'active': index == '1' }">
                        <image v-if="index == '1'" class="small_Icon" src="@/static/img/checked.png" />
                        <image v-else class="small_Icon" src="@/static/img/unchecked.png" />
                        <view class="title flex">
                            <view class="fs_14">{{ item.name }}</view>
                        </view>
                        <view class="body">
                            <view class="body_item flex">
                                <view class="label">设备型号</view>
                                <view class="value">{{ item.type }}</view>
                            </view>
                            <view class="body_item flex">
                                <view class="label">MAC地址</view>
                                <view class="value">{{ item.Mactype }}</view>
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useEquipmentStore } from "@/stores/modules/equipment/equipment";
const equipmentStore = useEquipmentStore();

const searchParam = ref("");
const search = (val: string) => {
    console.log(val);
};
const goback = () => {
    uni.navigateBack();
}

</script>

<style lang="scss" scoped>
scroll-view {
    height: calc(100vh - 148px);

    .item {
        width: 92%;
        margin: 20px auto;
        position: relative;
        border-radius: 8px;

        &.active {
            background: rgb(238, 245, 255);
            border: 2px solid rgb(0, 119, 255);
        }

        .small_Icon {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title {
            justify-content: space-between;
        }

        .body {
            margin: 10px 0;

            .body_item {
                font-size: 14px;
                margin-bottom: 10px;

                .label {
                    margin-right: 10px;
                    color: #7C8190;
                }

                .value {
                    color: #1D2541;
                }
            }
        }
    }
}
</style>
